<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useStore } from 'vuex'

const props = defineProps({
  hasAddBtn: Boolean,
  addBtnMethod: String
})

onMounted(() => {
  store.dispatch('GetResentMessageList', [store.getters.getUserId, searchContent.value])
  store.dispatch('GetFriendList', [store.getters.getUserId, searchContent.value])
})

const searchContent = ref('')

const store = useStore()

const emit = defineEmits(['friend-search-view'])

const handleAddBtnClick = () => {
  if (props.addBtnMethod === 'friend') {
    emit('friend-search-view')
  }
}

const handleSearchResent = () => {
  store.dispatch('GetResentMessageList', [store.getters.getUserId, searchContent.value])
}

const handleSearchFriend = () => {
  store.dispatch('GetFriendList', [store.getters.getUserId, searchContent.value])
}
</script>

<template>
  <div class="h-16 w-full flex justify-center items-center bg-white">
    <input
      v-if="!hasAddBtn"
      v-model="searchContent"
      class="h-7 w-44 pl-3 pr-3 bg-gray-200 text-slate-600 text-sm focus:outline-none focus:bg-white border-0 rounded-sm shadow"
      type="text"
      placeholder="搜索"
      maxlength="20"
      @keyup="handleSearchResent"
    />
    <input
      v-if="hasAddBtn"
      v-model="searchContent"
      class="h-7 w-40 pl-3 pr-3 bg-gray-200 text-slate-600 text-sm focus:outline-none focus:bg-white border-0 rounded-sm shadow"
      type="text"
      placeholder="搜索"
      maxlength="20"
      @keyup="handleSearchFriend"
    />
    <button v-if="hasAddBtn" class="h-4 w-4 ml-2" @click="handleAddBtnClick">
      <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
          fill="#cdcdcd"
        ></path>
      </svg>
    </button>
  </div>
</template>

<style scoped></style>
